<template>
	<view >
		<!-- 底部支付 -->
		<view class="pay-row">
			<view class="price-all">
				<text>合计:</text>
				<text>￥</text>
				<text>{{payment.toFixed(2)}}</text>
			</view>
			<view class="pay-btn-row">
				<u-button type="default" shape="circle" text="立即支付" class="pay-btn" @click="payHandle"
					hover-class="none">立即支付
				</u-button>
			</view>
		</view>
		<!-- 确认支付弹出框 -->
		<view class="pay-modal">
			<u-popup v-model="isShow" mode="bottom">
				<view class="pay-modal-main">
					<view class="close">
						<img src="@/static/img/pay/close.png" alt="" @tap="closeHandle">
					</view>
					<view class="pay-methods-title">
						<text>选择支付方式</text>
					</view>
					<view class="sum">
						<text>￥</text>
						<text>{{payment.toFixed(2)}}</text>
					</view>
					<view class="wx-pay">
						<img src="@/static/img/pay/wx.png" alt="">
						<text>微信支付</text>
						<u-radio-group v-model="value" @change="radioGroupChange" class="choose">
							<u-radio @change="radioChange" :name="list[0].name" :disabled="list[0].disabled" active-color="#F4333C">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="zfb-pay">
						<img src="@/static/img/pay/zfb.png" alt="">
						<text>支付宝</text>
						<u-radio-group v-model="value" @change="radioGroupChange" class="choose">
							<u-radio @change="radioChange" :name="list[1].name" :disabled="list[1].disabled" active-color="#F4333C">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="confirm-pay-row">
						<u-button type="default" shape="circle" text="确认支付" class="confirm-pay-btn" @click="confirmPayHandle"
							hover-class="none">确认支付</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name:"pay",
		props:{
			//支付金额
			payment:{
				type:Number,
				default:null
			}
		},
		data() {
			return {
				//微信支付宝支付选中
				list: [{
						name: 'wx',
						disabled: false
					},
					{
						name: 'zfb',
						disabled: false
					},
				],
				//支付方式
				value: 'wx',
				//调取支付弹窗
				isShow: false,
			};
		},
		methods: {
				// 点击支付
				payHandle() {
					this.isShow = true;
				},
				//取消支付
				closeHandle() {
					this.isShow = false;
				},
				// 选中某个单选框时，由radio时触发
				radioChange(e) {
					// this.value = e;
				},
				// 选中任一radio时，由radio-group触发
				radioGroupChange(e) {
					// this.value = e;
				},
				//确认支付
				confirmPayHandle(){
					if(this.value == 'wx'){
						console.log('调用微信支付');
					}else{
						console.log('调用支付宝支付');
					}
				}
			}
		
	}
</script>

<style lang="scss" scoped>
	.pay-row {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 132rpx;
		padding: 0rpx 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.price-all {
			>text:nth-of-type(1) {
				font-size: 24rpx;
				color: #666666;
			}
	
			>text:nth-of-type(2) {
				font-size: 24rpx;
				color: #F4333C;
			}
	
			>text:nth-of-type(3) {
				font-size: 34rpx;
				font-weight: bold;
				color: #F4333C;
			}
		}
	
		.pay-btn-row {
			.pay-btn {
				background-color: #F4333C;
				color: #fff;
				width: 260rpx;
				height: 80rpx;
			}
	
			.u-hairline-border:after {
				border: none;
			}
		}
	}
	
	.pay-modal {
		border-radius: 24rpx;
		background: #fff;
	
		.pay-modal-main {
			padding: 32rpx 30rpx;
	
			.close {
				display: flex;
	
				>img {
					margin-left: auto;
					width: 28rpx;
					height: 28rpx;
				}
			}
	
			.pay-methods-title {
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}
	
			.sum {
				text-align: center;
				margin-top: 60rpx;
	
				>text:first-child {
					font-size: 30rpx;
					color: #F4333C;
				}
	
				>text:last-child {
					font-size: 60rpx;
					color: #F4333C;
					font-weight: bold;
				}
			}
			.wx-pay{
				display: flex;
				align-items: center;
				margin-top: 90rpx;
				>img{
					width: 37rpx;
					height: 32rpx;
				}
				>text{
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 12rpx;
				}
				.choose{
					margin-left: auto;
				}
			}
			.zfb-pay{
				display: flex;
				align-items: center;
				margin-top: 71rpx;
				>img{
					width: 33rpx;
					height: 32rpx;
				}
				>text{
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 12rpx;
				}
				.choose{
					margin-left: auto;
				}
			}
			.confirm-pay-row {
				margin-top: 100rpx;
				.confirm-pay-btn {
					background-color: #F4333C;
					color: #fff;
					height: 90rpx;
				}
			
				.u-hairline-border:after {
					border: none;
				}
			}
		}
	}
	

</style>